.deposit-wrapper{
  background-color: #f0f0f0;
  padding-bottom: 1.4rem;
}
.deposit-top-box{
  height:310/75rem;
  background-color: #fff;
  padding: 0 30/75rem ;
  overflow: hidden;
  .logo-02{
    display: block;
    width: 342/75rem;
    height: 171/75rem;
    margin: 44/75rem auto 0;
  }
  .p-money{
    margin-top: 30/75rem;
    font-size: 30/75rem;
  }
}
.deposit-tit{
  height:80/75rem;
  line-height: 80/75rem;
  margin-top: 10/75rem;
  padding: 0 30/75rem ;
  font-size: 30/75rem;
  background-color: #fff
}
.deposit-plan{
  width: 100%;
  white-space: nowrap;
  overflow-x:scroll;
  overflow-y:hidden;
  padding: 20/75rem 0;
  .item{
    display: inline-block;
    width: 364/75rem;
    height: 380/75rem;
    background-color: #ffffff;
    margin: 0 20/75rem;
    .p-money{
      height: 170/75rem;
      background:url("../../assets/deposit-pic-01.png") 0 bottom repeat-x #ffb230;
      text-align: center;
      line-height: 170/75rem;
      font-size: 52/75rem;
      color: #fff;

    }
    .p-send{
      padding:0 20/75rem;
      margin-top: 12/75rem;
    }
    .p-name{
      padding:0 20/75rem;
      margin-top: 12/75rem;
      color: #b3b1b1;
      font-size: 28/75rem;
    }
    .p-choose{
      margin-top: 30/75rem;
      text-align: center;

      line-height: 1;
      .Icon{
        width: 50/75rem;
        height: 50/75rem;
        fill: #e6e6e6;
      }
    }
    &.active{
      .p-choose{
        .Icon{
          fill: #ffb230;
        }
      }
    }
  }
}
.pay-icon{
  display: inline-block;
  width: .8rem;
  height: .8rem;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: .5em;
  vertical-align: middle;
  &.zfb{
    background-image: url('../../assets/pay-01.png');
  }
  &.wx{
    background-image: url('../../assets/pay-02.png');
  }
}
.deposit-pay{
  display: flex;
  height: 180/75rem;
  background-color: #fff;
  margin-bottom: 10/75rem;
  align-items: center;
  .item{
    text-align: center;
    flex: 1;
    .p-choose{
      line-height: 1;
      margin-top: 10/75rem;
      .Icon{
        display: inline-block;
        width: 50/75rem;
        height: 50/75rem;
        fill: #ffb230;
      }
    }
  }
}
.btn-pay{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.4rem;
  button{
    background-color: #ffb230;
    border:none;
    color: #fff;
    width: 100%;
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 1.2em;
    &:active{
      background-color: #e89e22;
    }
  }
}

.desposit-rule {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  background-color: #fff;
  padding: 30/75rem;
  transition: all .3s ease;
  opacity: 1;
  .p-tit {
    font-size: 36/75rem;
    text-align: center;
    font-weight: bold;
  }
  article {
    margin-top: 56/75rem;
    line-height: 1.5;
  }
  .p-close {
    position: absolute;
    font-size: 50/75rem;
    left: 30/75rem;
    top: 30/75rem;
    line-height: 1;
    color: #959496;
  }

  &.rule-enter, &.rule-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .return-btn {
    position: absolute;
    top: 30/75rem;
    left: 30/75rem;
    height: 64/75rem;
    width: 64/75rem;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    background-color: rgba(0,0,0,0.7);
    .Icon{
      display: inline-block;
      width: 28/75rem;
      height: 28/75rem;
      fill:#fff;
    }
  }
}
